<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入cesiumjs库 -->
    <script src="../lib/cesium/Cesium.js"></script>
    <title>Document</title>
</head>
<style>
    /* 引入cesium widget样式 */
    @import url(../lib/cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
</style>
<body>
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
<script>
    // 创建一个ArcGisMapServerImageryProvider实例用于加载ESRI的地图服务
        var esri = new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        })
    let viewer = new Cesium.Viewer('cesiumContainer', {
        // geocoder: false, // 搜地理位置搜索工
        // // homeButton: false, // 返回首页按钮
        // sceneModePicker: false, // 2D 3D切换按钮
        // baseLayerPicker: false, // 底图切换按钮
        // navigationHelpButton:false, // 帮助按钮
        // animation: false, // 左下角动画面板
        // timeline: false, // 时间轴
        // fullscreenButton: false, // 全屏按钮
        imageryProvider: esri,
        terrainProvider: new Cesium.CesiumTerrainProvider({
            url: Cesium.IonResource.fromAssetId(1),
            requestVertexNormals: true, // 关闭底图选择器
            requestWaterMask: true // 设置地图服务提供者为ESRI
        })
    });
    // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiN2ZlMWExNC04NjRlLTQzMTQtYmI2MS03M2NiN2Q0MjAwYTciLCJpZCI6ODYzNjIsImlhdCI6MTY0Nzc1NjgxNX0.UB9DEHTYlzJ-1N1XF8rH7uGEsw8W5nlMZuz-LTVizb8';
    // 开启太阳光照 
  viewer.scene.globe.enableLighting = true;

  // 开启地球动画
        viewer.clock.shouldAnimate = true;
        // 设置地球动画速度
        viewer.clock.multiplier = 1;
        // 设置时间线可视范围
        let start = Cesium.JulianDate.fromIso8601('2022-01-05');
        let end = Cesium.JulianDate.fromIso8601('2022-01-20');
        viewer.timeline.zoomTo(start, end);

        // 设置模型位置坐标
        const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 1500);
        // 添加模型实体到场景中
        var entity = viewer.entities.add({
            position: position,
            orientation: Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90, 0, 0)),
            model: {
                uri: "../model/feiji.glb",
                minimumPixelSize: 100,  // 最小像素尺寸
                maximumScale: 10000,     // 最大缩放尺寸
                show: true
            }
        });
        // 设置相机视角，聚焦到模型位置
        viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 20), new Cesium.HeadingPitchRange(0, 0, 0));


        viewer.scene.primitives.add(new Cesium.ParticleSystem({
            image: '../assets/huo.png',
            imageSize: new Cesium.Cartesian2(20, 20),
            startScale: 1.0,
            endScale: 4.0,
//上面的两个设置的是，粒子从初始到消亡，逐渐变化到原来尺寸的四倍
            particleLife: 1.0,
            speed: 10.0,
            emitter: new Cesium.CircleEmitter(0.5),
//0.5设置的是圆的半径，例子将回在圆的范围内随机向上发射粒子
            emissionRate: 5.0,  //每秒中设置发射粒子的数量
            modelMatrix: entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
//modelMatrix设置的是粒子系统的位置，将粒子系统从模型转换为世界坐标的4*4转换矩阵，需要绑定到飞机模型上
//这里使用模型的实例化对象entity,并用它的computeModelMatrix方法
            lifetime: 16.0  //粒子系统持续运行的时间
        }));
</script>
</html>